<template>
  <!-- 项目实施 - 弹窗头部Tab -->
  <div class="form-tab">
    <el-tabs v-model="actIdx" type="card" @tab-click="handleClick">
      <el-tab-pane v-for="(i, idx) in tabList" :key="'tab'+idx" :label="i" :name="idx.toString()"></el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
export default {
  name: "formTab",
  props: {
    tabList: {
      type: Array,
      default: () => []
    },
    actionTab: {
      type: String,
      default: () => "0",
    }
  },
  watch: {
    actionTab(n) {
      this.actIdx = n;
    }
  },
  data() {
    return {
      actIdx: '0',
    } 
  },
  mounted() {
    this.$nextTick(() => {
      if(this.actionTab) {
        this.actIdx = this.actionTab;
      }
    })
  },
  methods: {
    handleClick(tab, event) {
      this.$emit('tabChange', this.actIdx)
    }
  }
}
</script>
<style lang="scss" scoped>
  .form-tab {
    margin: 20px 0 0;
    ::v-deep {
      .el-tabs__header {
        margin: 0;
      }
    }
  }
</style>
